<template>
  <div class="my-header-bottom">
    <el-tabs class="tabSign" v-model="state.activeName" @tab-click="handleClick" @tab-remove="handleDelete">
      <el-tab-pane v-for="item in state.menuList" :closable="item.path !== '/Main'" :label="item.name" :name="item.path" :key="item.path"></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import Sortable from 'sortablejs'
import { reactive, watch } from 'vue';
import menuAllList from '../../config/project-base/routerName'

interface myHeaderBottom {
  menuAllList:any,
  menuList:Array<any>,
  activeName:string
}

const router = useRouter()

const state = reactive<myHeaderBottom>({
  menuAllList: menuAllList,
  menuList: [
    {
      name: '首页',
      path: '/Main'
    }
  ],
  activeName: '/Main'
})

const init = () => {
  const menuData = sessionStorage.getItem('menuData')
  const activeName = sessionStorage.getItem('activeName')
  if (menuData) {
    state.menuList = JSON.parse(menuData)
  }
  if (activeName) {
    state.activeName = activeName
  }
}

const rowDrop = () => {
  nextTick(() => {
    const el = document.querySelector('.tabSign .el-tabs__nav') // 找到想要拖拽的那一列
      Sortable.create(el, {
        onEnd: (v:any) => {
          const currRow = state.menuList.splice(v.oldIndex - 1, 1)[0] // 鼠标拖拽当前的el-tabs-pane
          state.menuList.splice(v.newIndex, 0, currRow) // tableData 是存放所以el-tabs-pane的数组
          sessionStorage.setItem('menuData', JSON.stringify(state.menuList))
        }
      })
  })
}

const handleClick = (tab:any) => {  
  state.activeName = tab.props.name
  router.push(tab.props.name)

  sessionStorage.setItem('activeName', state.activeName)
}

const handleDelete = (path:any) => {
  const index = state.menuList.findIndex(i => {
    return i.path === path
  })

  if (index === state.menuList.length - 1 || state.activeName === state.menuList[index].path) {
    if (state.activeName !== state.menuList[index].path && index === state.menuList.length - 1) {
      state.menuList.splice(index, 1)
    } else {
      state.menuList.splice(index, 1)
      state.activeName = state.menuList[index - 1].path
      router.push(state.menuList[index - 1].path)
    }
  } else {
    state.menuList.splice(index, 1)
  }

  sessionStorage.setItem('menuData', JSON.stringify(state.menuList))

  sessionStorage.setItem('activeName', state.activeName)
}

watch(
  () => router.currentRoute.value,
  (to) => {

    if (to.path === '/UserBehaviorReviewDetails') return

    const temp = state.menuAllList[to.path]

    state.activeName = to.path

    const index = state.menuList.findIndex(i => {
      return i.name === temp
    })

    if (index === -1) {
      state.menuList.push({
        name: temp,
        path: to.path
      })
    }

    sessionStorage.setItem('menuData', JSON.stringify(state.menuList))

    sessionStorage.setItem('activeName', state.activeName)
  }
)

onMounted(() => {
  init()
  rowDrop()
})

</script>

<style lang="scss" scoped>
.my-header-bottom {
  height: 34px;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  // display: flex;
  align-items: center;
  padding: 2px 10px 0 5px;
  box-sizing: border-box;
  // overflow-x: hidden;
  .page-item {
    width: auto !important;
    padding: 3px 10px;
    border: 1px solid #eee;
    font-size: 12px;
    cursor: pointer;
    margin-left: 5px;
    border-radius: 3px;
    white-space: nowrap;
    i {
      display: inline-block;
      position: relative;
      left: 5px;
    }
  }

  :deep(.el-tabs__nav-wrap::after) {
    display: none;
  }
  :deep(.el-tabs__item) {
    display: inline-block;
    height: 30px;
    line-height: 28px;
    width: auto !important;
    padding: 0px 15px !important;
    border: 1px solid #eee;
    font-size: 12px;
    cursor: pointer;
    margin-left: 5px;
    border-radius: 3px;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  :deep(.el-tabs__active-bar) {
    display: none;
  }
  :deep(.el-tabs__header) {
    margin: 0 !important;
  }
  :deep(.el-tabs__item.is-active) {
    background-color: #0960bd;
    color: #fff;
  }
  :deep(.el-tabs__nav-next), :deep(.el-tabs__nav-prev) {
    line-height: 30px;
  }
  :deep(.el-tabs__item .is-icon-close) {
    position: relative;
    top: 2px;
  }
}
</style>